<template>
  <div style="overflow: hidden">
    <div
      class="s"
      style="border-right: 5px solid #8f0707; border-top-right-radius: 5px; border-bottom-right-radius: 5px"
      v-bind:class="{ xx: 60 - v == s }"
      v-for="v in 60"
      :key="v"
      v-bind:style="{
        transform:
          'translate(' + xc(sr, v + s, 60) + 'px,' + yc(sr, v + s, 60) + 'px) rotate(' + dg(v + s, 60) + 'deg)',
      }"
      v-html="zh(60 - v, 1) + '秒'"
    ></div>

    <div
      class="i"
      style="border-right: 5px solid #8f0707; border-left: 5px solid #8f0707"
      v-for="v in 60"
      :key="v"
      v-bind:class="{ xx: 60 - v == i }"
      v-bind:style="{
        transform:
          'translate(' + xc(ir, v + i, 60) + 'px,' + yc(ir, v + i, 60) + 'px) rotate(' + dg(v + i, 60) + 'deg)',
      }"
      v-html="zh(60 - v, 1) + '分'"
    ></div>

    <div
      class="h"
      v-for="v in 24"
      v-bind:class="{ xx: 24 - v == h }"
      :key="v"
      style=""
      v-bind:style="{
        transform:
          'translate(' + xc(hr, v + h, 24) + 'px,' + yc(hr, v + h, 24) + 'px) rotate(' + dg(v + h, 24) + 'deg)',
      }"
      v-html="zh(24 - v, 1) + '时'"
    ></div>

    <div
      class="w"
      v-for="v in 7"
      v-bind:class="{ xx: 7 - v == w }"
      :key="v"
      v-bind:style="{
        transform: 'translate(' + xc(wr, v + w, 7) + 'px,' + yc(wr, v + w, 7) + 'px) rotate(' + dg(v + w, 7) + 'deg)',
      }"
    >
      星期{{ wk[7 - v] }}
    </div>

    <div
      class="d"
      v-for="(v, k) in 31"
      v-bind:class="{ xx: 31 - k == dd }"
      style="border-right: 5px solid #8f0707"
      :key="v"
      v-bind:style="{
        transform:
          'translate(' + xc(dr, k + dd, 31) + 'px,' + yc(dr, k + dd, 31) + 'px) rotate(' + dg(k + dd, 31) + 'deg)',
      }"
      v-html="zh(31 - k, 1) + '日'"
    ></div>

    <div
      class="m"
      v-for="(v, k) in 12"
      v-bind:class="{ xx: 12 - k == m + 1 }"
      :key="v"
      style="border-right: 5px solid #8f0707"
      v-bind:style="{
        transform:
          'translate(' +
          xc(mr, k + m + 1, 12) +
          'px,' +
          yc(mr, k + m + 1, 12) +
          'px) rotate(' +
          dg(k + m + 1, 12) +
          'deg)',
      }"
      v-html="zh(12 - k, 1) + '月'"
    ></div>

    <div class="y">{{ y }}年</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const { PI } = Math;
const s = ref(0);
const i = ref(0);
const h = ref(0);
const dd = ref(0);
const m = ref(0);
const y = ref(0);
const w = ref(0);
const sr = 500;
const ir = 400;
const hr = 300;
const wr = 600;
const dr = 200;
const mr = 100;
const wk = ['日', '一', '二', '三', '四', '五', '六'];
onMounted(() => {
  setInterval(() => {
    const date = new Date();
    y.value = date.getFullYear();
    m.value = date.getMonth();
    dd.value = date.getDate();
    w.value = date.getDay();
    h.value = date.getHours();
    i.value = date.getMinutes();
    s.value = date.getSeconds();
    // Math.cos();
  }, 1000);
});
function xc(r, k, l) {
  // console.log(' r * Math.cos((2 * k * this.PI) / l): ', r * Math.cos((2 * k * this.PI) / l));
  return r * Math.cos((2 * k * PI) / l) * 1.5;
}
function yc(r, k, l) {
  return r * Math.sin((2 * k * PI) / l) * 1.5;
}
function dg(k, l) {
  return (k * 360) / l;
}
function zh(num, type) {
  // eslint-disable-next-line default-case
  switch (type) {
    case 1:
      var t1 = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
      var sw = parseInt(num / 10);
      var gw = num % 10;
      // eslint-disable-next-line vars-on-top, no-var
      var result = (sw != 0 ? (sw == 1 ? '十' : `${t1[sw]}十`) : '') + (gw != 0 ? t1[gw] : sw == 0 ? t1[0] : '');

      result.replace('一十', '十');

      return result;
  }
}
</script>

<style scoped lang="less">
.s,
.i,
.h,
.w,
.d,
.m,
.y {
  position: absolute;
  padding: 0.2vw;
  width: 130px;
  text-align: center;
  top: 50%;
  left: 15%;
  transition: transform 1s;
  color: #fff;
  opacity: 1;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.xx,
.y {
  background-color: #8f0707;
  color: #fff;
  padding: 0.2vh;
  font-size: 20px;
  font-weight: 900;
}
</style>
